<template>
    <el-dialog
        @open="getList"
        :modelValue="dialogVisible"
        @update:modelValue="
            (e) => {
                emit('update:dialogVisible', e);
            }
        "
        :title="'新增' + (type === 'user' ?'用户':'角色')"
    >

        <el-table ref="multipleUserTableRef" @selection-change="handleUserSelectionChange" :data="users" v-if="type === 'user'">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="50" />
            <el-table-column prop="userName" label="name" />
            <el-table-column prop="email" label="email" />
        </el-table>

        <el-table ref="multipleRoleTableRef" @selection-change="handleRoleSelectionChange" :data="roles" v-if="type === 'role'">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="50" />
            <el-table-column prop="name" label="name" />
        </el-table>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emit('update:dialogVisible',false)">Cancel</el-button>
                <el-button type="primary" @click="sureClick">
                    Confirm
                </el-button>
            </span>
        </template>

    </el-dialog>
</template>

<script setup>
import {organizationUnitsGetUnAddUsers,organizationUnitsGetUnAddRoles,organizationUnitsAddRoleToOrganizationUnitAsync,organizationUnitsAddUserToOrganizationUnit} from "@/api/organizationUnits"
import { reactive, ref, watch,nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({
  name: "AddDialog",
});
const props = defineProps({
  dialogVisible: {
    type:Boolean,
    default:false
  },
  type:{
    type:String,
    default:''
  },
  organizationId: {
    type:String,
    default:''
  }
})
const emit = defineEmits(['update:dialogVisible','handleAdd']);

const users = ref([]);
const roles = ref([]);
const multipleUserTableRef = ref(null);
const multipleRoleTableRef = ref(null);
let multipleUserSelection = []
let multipleRoleSelection = []
async function getList() {
  if(props.type === 'user') {
    const res = await organizationUnitsGetUnAddUsers({organizationUnitId:props.organizationId})
    users.value = res?.items ?? []
  }else if(props.type === 'role') {
    const res = await organizationUnitsGetUnAddRoles({organizationUnitId:props.organizationId})
    roles.value = res?.items ?? []
  }
}

function handleUserSelectionChange(val) {
  console.log('handleUserSelectionChange',val)
  multipleUserSelection = val;
}

function handleRoleSelectionChange(val) {
  multipleRoleSelection = val
}

async function sureClick() {
  if(props.type === 'user') {
    await organizationUnitsAddUserToOrganizationUnit({
      organizationUnitId:props.organizationId,
      userId:multipleUserSelection.map(v => v.id)
    })
  }else if(props.type === 'role') {
    await organizationUnitsAddRoleToOrganizationUnitAsync({
      organizationUnitId:props.organizationId,
      roleId:multipleRoleSelection.map(v => v.id)
    })
  }
  ElMessage({
    type: 'success',
    message: '新增成功',
  })
  emit('update:dialogVisible',false)
  emit('handleAdd')


}
</script>

<style lang="scss" scoped></style>
